<template>
	<view class="page">
		<view class="pageBg">
			<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/memberbg2.jpg" mode="aspectFill"></image>
		</view>
		<view class="flex0">
			<u-navbar :fixed='false' bgColor="transparent" @leftClick="navBack"  title="学生心理健康档案">
				<view slot="center" class="navTitle">
					学生心理健康档案 
				</view>
			</u-navbar>
			<view class="pd30">
				<view class="filterBlock">
					<view class="block">
						<view class="select">
							<uni-data-select
							  v-model="classId"
							  :localdata="classOptions"
							  :clear="false"
							  placeholder="选择班级"
							  @change="search"
							></uni-data-select>
						</view>
						<view class="search">
							<view class="ico">
								<image src="@/static/images/icon-search.png" mode="aspectFit"></image>
							</view>
							<input type="text" v-model="keyword" placeholder="搜索姓名" confirm-type="search" @confirm="search" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex1">
			<scroll-view scroll-y="true"  @scroll="updateScroll" :scroll-top="scrollTop" class="scrollView pt30" @scrolltolower="loadMore">
				<view class="pd30">
					<view class="archivesList">
						<navigator :url="'/subpage/teacher/archives/detail?id='+i.id" open-type="navigate" class="item navigator" v-for="(i,index) in list" :key="index">
							<view class="name">
								{{i.name}}
							</view>
							<view class="grade">
								{{i.class}}
							</view>
							<view class="ico">
								<image src="@/static/images/icon-more.svg" mode="aspectFit"></image>
							</view>
						</navigator>
					</view>
					<u-loadmore fontSize="24rpx" :status="list.length<total?(isLoading?'loading':'loadmore'):'nomore'" />
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				oldScrollTop:0,
				scrollTop:0,
				classId:'',
				keyword:'',
				classOptions:[],
				list:[],
				pageSize:10,
				total:1,
				pageIndex:1,
				isLoading:false
			}
		},
		methods: {
			getClassOptions(){
				var that=this;
				var res=[
					{
						value:101,
						text:'七年级一班'
					},
					{
						value:102,
						text:'七年级二班'
					},
					{
						value:103,
						text:'七年级三班'
					},
					{
						value:104,
						text:'七年级四班'
					},
					{
						value:105,
						text:'七年级五班'
					}
				];
				that.classOptions=res;
			},
			updateScroll(e){
				this.oldScrollTop=e.detail.scrollTop;
			},
			search(){//筛选
				var that=this;
				that.list=[];
				that.pageIndex=1;
				that.scrollTop=that.oldScrollTop;
				that.$nextTick(function() {
					that.scrollTop = 0
				});
				that.getList();
			},
			getList(){
				var that=this;
				if(that.isLoading){return;};
				that.isLoading=true;
				let timer=setTimeout(function(){
					//请求开始
					var res={
						list:[
							{
								id:101,
								name:'余夹雪',
								class:'七年级一班'
							},
							{
								id:101,
								name:'刘美美',
								class:'七年级一班'
							},
							{
								id:101,
								name:'王晶晶',
								class:'七年级一班'
							},
							{
								id:101,
								name:'陈招解',
								class:'七年级一班'
							},
							{
								id:101,
								name:'叶勇恒',
								class:'七年级一班'
							},
							{
								id:101,
								name:'陈佳玉',
								class:'七年级一班'
							},
							{
								id:101,
								name:'范奚丹',
								class:'七年级一班'
							},
							{
								id:101,
								name:'李志玲',
								class:'七年级一班'
							},
							{
								id:101,
								name:'陈佳玉',
								class:'七年级一班'
							},
							{
								id:101,
								name:'范奚丹',
								class:'七年级一班'
							},
							{
								id:101,
								name:'李志玲',
								class:'七年级一班'
							}
						],
						total:50
					};
					var arr=that.list.concat(res.list);
					that.list=arr;
					that.total=res.total;
					that.isLoading=false;
					//end
					clearTimeout(timer);
				},2000);
			},
			loadMore(){
				var that=this;
				if(that.list.length<that.total&&!that.isLoading){
					that.pageIndex++;
					that.getList();
				}
			}
		},
		computed:{
			
		},
		mounted(){
			this.getClassOptions();
			this.getList();
		}
	}
</script>

<style lang="scss" scoped>
	.slot-content{
		flex: 0 0 auto;
		width: 100%;
	}
	/deep/.u-popup__content{
		border-radius: 30rpx !important;
		.u-modal__title{
			font-size: 40rpx !important;
			color: #65554d !important;
			padding-top: 40rpx !important;
			line-height: 1;
			font-weight: normal !important;
		}
		.u-modal__content{
			padding: 40rpx 40rpx 0 !important;
		}
		.u-line{
			display: none;
		}
		.u-modal__button-group__wrapper{
			height: 120rpx;
			border-radius: 0 !important;
			.u-modal__button-group__wrapper__text{
				font-size: 28rpx !important;
			}
		}
	}
	.filterBlock{
		padding-top: 20rpx;
		.block{
			.search{
				background: #fff;
				border-color: #fff;
				margin-left: 10rpx;
			}
		}
		.select{
			margin-left: 0;
			width: 280rpx;
			/deep/ .uni-select{
				background: #fff !important;
				border-color: #fff !important;
			}
		}
	}
</style>
